<script setup lang="ts">
import { h, ref } from 'vue'
import { Button, Modal } from 'ant-design-vue'
import { ZoomInOutlined } from '@ant-design/icons-vue'

defineOptions({
  name: 'FormPaymentGuide',
})

const showZoomModal = ref(false)
const zoomLevel = ref(100)
const documentRef = ref<HTMLElement>()

const feeTable = [
  { exam: 'CDCS', type: '首次报名', price: '7,200.00' },
  { exam: 'CDCS', type: '补考报名（两个单元）', price: '4,000.00' },
  { exam: 'CDCS', type: '补考报名（一个单元）', price: '2,000.00' },
  { exam: 'CSDG', type: '首次报名', price: '7,200.00' },
  { exam: 'CSDG', type: '补考报名（两个单元）', price: '4,000.00' },
  { exam: 'CSDG', type: '补考报名（一个单元）', price: '2,000.00' },
  { exam: 'CITF', type: '首次报名', price: '7,200.00' },
  { exam: 'CITF', type: '补考报名（两个单元）', price: '4,000.00' },
  { exam: 'CITF', type: '补考报名（一个单元）', price: '2,000.00' },
  { exam: 'CertPAY', type: '首次报名', price: '6,500.00' },
  { exam: 'CertPAY', type: '补考报名（两个单元）', price: '2,800.00' },
  { exam: 'CertPAY', type: '补考报名（一个单元）', price: '1,400.00' },
  { exam: 'CSCF', type: '首次报名', price: '7,500.00' },
  { exam: 'CSCF', type: '补考报名（两个单元）', price: '3,600.00' },
  { exam: 'CSCF', type: '补考报名（一个单元）', price: '1,800.00' },
  { exam: 'CITR', type: '首次报名', price: '7,200.00' },
  { exam: 'CITR', type: '补考报名（两个单元）', price: '4,000.00' },
  { exam: 'CITR', type: '补考报名（一个单元）', price: '2,000.00' },
]

const transferSteps = [
  '登录个人网上银行或前往银行柜台，发起转账操作；',
  '准确填写上述账户信息，确保收款人名称与账号匹配；',
  '务必在汇款附言中注明：考生姓名+考试名称（例如："张三 CDCS"）；',
  '完成转账后，保存汇款凭证截图（含交易时间、金额、附言等关键信息）。',
]

const wechatSteps = [
  '扫描中国贸促会培训中心官方微信二维码（二维码将在报名系统缴费页面显示）；',
  '输入缴费金额（需与所选考试类别费用一致）；',
  '在付款备注栏填写考生姓名+考试名称（例如："李四 CITF"）；',
  '支付成功后，截图保存微信支付凭证。',
]

const notices = [
  '信息准确性：汇款时务必核对账户信息及备注内容，因信息错误导致的缴费失败或延误，需考生自行承担责任。',
  '凭证保存：缴费凭证截图需清晰可辨，用于报名系统上传或后续核对，建议保存至考试结束。',
  '缴费时效：完成报名信息填写后，请在48小时内完成缴费，逾期未缴费将视为报名无效。',
  '咨询方式：如遇缴费问题，可联系中国贸促会培训中心考试服务热线：010-82217878（工作日9:00-17:00）。',
]

const afterPaymentSteps = [
  '登录国际贸易金融6C考试报名系统，进入"我的报名"页面；',
  '点击"上传缴费凭证"，提交汇款截图或微信支付截图；',
  '等待系统审核（通常1-2个工作日），审核通过后显示"缴费成功"即完成报名流程。',
]

// 放大查看功能
function handleZoomIn() {
  showZoomModal.value = true
  zoomLevel.value = 100
}

function handleZoomChange(delta: number) {
  zoomLevel.value = Math.max(50, Math.min(200, zoomLevel.value + delta))
}

function resetZoom() {
  zoomLevel.value = 100
}
</script>

<template>
  <page-container>
    <!-- 工具栏 -->
    <div
      class=""
      style="position: absolute;
    right:10px;
    "
    >
      <Button
        class="btn-ccpit-detail"
        type="default" :icon="h(ZoomInOutlined)" @click="handleZoomIn"
      >
        放大查看
      </Button>
    </div>

    <div
      ref="documentRef"
      class="guide-document"
      style="
        position: relative;
        top: -21px;
        width: 100%;
        height: 89vh;
        overflow-y: scroll;
      "
    >
      <header class="document-header">
        <h1>国际贸易金融 6C 考试报名缴费指南</h1>
      </header>

      <section class="document-section">
        <h2>一、考试费用明细</h2>
        <table class="fee-table">
          <thead>
            <tr>
              <th>考试类别</th>
              <th>缴费类型</th>
              <th>单价（元）</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, index) in feeTable" :key="index">
              <td>{{ row.exam }}</td>
              <td>{{ row.type }}</td>
              <td class="price-cell">
                {{ row.price }}
              </td>
            </tr>
          </tbody>
        </table>
      </section>

      <section class="document-section">
        <h2>二、缴费方式说明</h2>

        <div class="payment-method">
          <h3>转账汇款</h3>

          <div class="account-info">
            <h4>账户信息</h4>
            <table class="info-table">
              <tr>
                <td class="label-cell">
                  收款人：
                </td>
                <td>中国国际贸易促进委员会（中国国际商会）培训中心</td>
              </tr>
              <tr>
                <td class="label-cell">
                  开户行：
                </td>
                <td>中国光大银行学院路支行</td>
              </tr>
              <tr>
                <td class="label-cell">
                  账 号：
                </td>
                <td>7505 0188 0001 41075</td>
              </tr>
            </table>
          </div>

          <div class="steps-section">
            <h4>操作步骤</h4>
            <ol class="steps-list">
              <li v-for="(step, index) in transferSteps" :key="index">
                {{ step }}
              </li>
            </ol>
          </div>
        </div>

        <div class="payment-method">
          <h3>微信二维码缴费</h3>

          <div class="steps-section">
            <h4>操作指引</h4>
            <ol class="steps-list">
              <li v-for="(step, index) in wechatSteps" :key="index">
                {{ step }}
              </li>
            </ol>
          </div>
        </div>
      </section>

      <section class="document-section">
        <h2>注意事项</h2>
        <ol class="notices-list">
          <li v-for="(notice, index) in notices" :key="index">
            {{ notice }}
          </li>
        </ol>
      </section>

      <section class="document-section">
        <h2>缴费完成后操作</h2>
        <ol class="steps-list">
          <li v-for="(step, index) in afterPaymentSteps" :key="index">
            {{ step }}
          </li>
        </ol>
        <p class="final-note">
          请考生务必在规定时间内完成缴费及凭证上传，以免影响考试资格。
        </p>
      </section>
    </div>

    <!-- 放大查看模态框 -->
    <Modal
      v-model:open="showZoomModal"
      title="国际贸易金融6C考试报名缴费指南"
      :width="1200"
      :footer="null"
      class="zoom-modal"
      :styles="{ body: { padding: '0' } }"
    >
      <div class="zoom-controls">
        <Button.Group>
          <Button @click="handleZoomChange(-10)">
            缩小
          </Button>
          <Button @click="resetZoom">
            {{ zoomLevel }}%
          </Button>
          <Button @click="handleZoomChange(10)">
            放大
          </Button>
        </Button.Group>
      </div>
      <div
        class="zoom-content"
        :style="{ transform: `scale(${zoomLevel / 100})`, transformOrigin: 'top center' }"
      >
        <div class="guide-document zoom-document">
          <header class="document-header">
            <h1>国际贸易金融 6C 考试报名缴费指南</h1>
          </header>

          <section class="document-section">
            <h2>一、考试费用明细</h2>
            <table class="fee-table">
              <thead>
                <tr>
                  <th>考试类别</th>
                  <th>缴费类型</th>
                  <th>单价（元）</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(row, index) in feeTable" :key="index">
                  <td>{{ row.exam }}</td>
                  <td>{{ row.type }}</td>
                  <td class="price-cell">
                    {{ row.price }}
                  </td>
                </tr>
              </tbody>
            </table>
          </section>

          <section class="document-section">
            <h2>二、缴费方式说明</h2>

            <div class="payment-method">
              <h3>转账汇款</h3>

              <div class="account-info">
                <h4>账户信息</h4>
                <table class="info-table">
                  <tr>
                    <td class="label-cell">
                      收款人：
                    </td>
                    <td>中国国际贸易促进委员会（中国国际商会）培训中心</td>
                  </tr>
                  <tr>
                    <td class="label-cell">
                      开户行：
                    </td>
                    <td>中国光大银行学院路支行</td>
                  </tr>
                  <tr>
                    <td class="label-cell">
                      账 号：
                    </td>
                    <td>7505 0188 0001 41075</td>
                  </tr>
                </table>
              </div>

              <div class="steps-section">
                <h4>操作步骤</h4>
                <ol class="steps-list">
                  <li v-for="(step, index) in transferSteps" :key="index">
                    {{ step }}
                  </li>
                </ol>
              </div>
            </div>

            <div class="payment-method">
              <h3>微信二维码缴费</h3>

              <div class="steps-section">
                <h4>操作指引</h4>
                <ol class="steps-list">
                  <li v-for="(step, index) in wechatSteps" :key="index">
                    {{ step }}
                  </li>
                </ol>
              </div>
            </div>
          </section>

          <section class="document-section">
            <h2>注意事项</h2>
            <ol class="notices-list">
              <li v-for="(notice, index) in notices" :key="index">
                {{ notice }}
              </li>
            </ol>
          </section>

          <section class="document-section">
            <h2>缴费完成后操作</h2>
            <ol class="steps-list">
              <li v-for="(step, index) in afterPaymentSteps" :key="index">
                {{ step }}
              </li>
            </ol>
            <p class="final-note">
              请考生务必在规定时间内完成缴费及凭证上传，以免影响考试资格。
            </p>
          </section>
        </div>
      </div>
    </Modal>
  </page-container>
</template>

<style scoped>
@import "./index.css";
</style>
